<!-- 批量导出 -->
<template>
  <el-dialog class="gl_dialog_TitleLine" width="660px" title="导出数据" :visible.sync="dialogVisible" :close-on-click-modal="false">
    <el-row :gutter="20">
      <el-col :md="10" :lg="6">
        <p>年份</p>
        <el-select v-model="Api_GET_TradeOrderCompetitionListQO.Year" size="mini" placeholder="请选择年份" filterable @change="getGameData">
          <el-option v-for="item in year" :key="item" :label="item" :value="item" />
        </el-select>
      </el-col>
      <el-col :md="14" :lg="10">
        <p>赛事时间</p>
        <el-date-picker
          v-model="time"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="请选择日期"
          end-placeholder="请选择日期"
          size="mini"
          value-format="yyyy-MM-dd"
          style="width:100%"
          @change="timeChange"
        />
      </el-col>
    </el-row>
    <div v-loading="loading" class="gl_my_15" style="min-heighr:200px">
      <ul v-if="gameData.length > 0" class="gl_pt_15">
        <el-radio-group v-model="radioGame" style="width: 94%;">
          <el-row :gutter="15">
            <!-- <el-col v-for="(item, index) in gameData" :key="index" :span="10" class="gl_mb_15">
              <el-radio class="radio" :label="item.competitionId">{{ item.name }}</el-radio>
            </el-col> -->
            <el-col v-for="(item, index) in gameData" :key="index" :span="10" class="gl_mb_15">
              <el-radio class="radio" :label="item">
                <el-popover placement="bottom" width="300" trigger="hover" :content="item.name">
                  <span slot="reference" class="gl_ellipsis">{{ item.name }}</span>
                </el-popover>
              </el-radio>
            </el-col>
          </el-row>
        </el-radio-group>
      </ul>
      <div v-else class="gl_pt_15">
        该筛选条件下，暂无赛事
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="close()">取 消</el-button>
      <el-button :loading="buLoading" type="primary" size="mini" @click="exportData()">导出</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { mapState } from 'vuex';
import { api_GET_DownLoadFileAddHeader } from '@/extend/api/file';
import { errorText } from '@/lib';
import {
  api_GET_TradeOrderCompetitionYearListBusinessesId,
  api_GET_TradeOrderCompetitionList
} from '@/extend/api/swaggerApi/app.js';
import {
  Api_GET_TradeOrderCompetitionListQO
} from '@/lib/form/swaggerForm';
export default {
  name: 'BatchExport',
  props: {
    form: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data() {
    return {
      loading: false,
      buLoading: false,
      dialogVisible: false,
      Api_GET_TradeOrderCompetitionListQO: new Api_GET_TradeOrderCompetitionListQO(),
      tempUrl: '', // 导出的下载地址
      time: [], // 时间
      year: [], // 年份
      gameData: [], // 赛事列表
      startGameData: [],
      radioGame: '', // 选中的赛事
      pickerOptions: { // 时间范围限制
        disabledDate: time => {
          var startDate = this.Api_GET_TradeOrderCompetitionListQO.Year + '-01-01';
          var endDate = this.Api_GET_TradeOrderCompetitionListQO.Year + '-12-31';
          var staDate = startDate.split('-');
          var enDate = endDate.split('-');
          var sDate = new Date(staDate[0], staDate[1] - 1, staDate[2]);
          var eDate = new Date(enDate[0], enDate[1] - 1, enDate[2]);
          return time.getTime() < sDate || time.getTime() > eDate;
        }
      }
    };
  },
  computed: {
    ...mapState({
      DelegationId: state => state.user.rootDelegationId
    })
  },
  created() {
    this.Api_GET_TradeOrderCompetitionListQO.Year = '';
    if (this.DelegationId) {
      this.getYearData();
    }
  },
  methods: {
    open() {
      this.dialogVisible = true;
    },
    // 获取年份
    getYearData() {
      this.loading = true;
      api_GET_TradeOrderCompetitionYearListBusinessesId(this.DelegationId).then(res => {
        this.year = res;
        this.Api_GET_TradeOrderCompetitionListQO.Year = res[0];
        this.getGameData('created');
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    // 获取赛事选项
    getGameData(index) {
      this.loading = true;
      this.Api_GET_TradeOrderCompetitionListQO.BusinessesId = this.DelegationId;
      if (this.Api_GET_TradeOrderCompetitionListQO.StartDateTime === '' && this.Api_GET_TradeOrderCompetitionListQO.EndDateTime === '') {
        var data = {
          BusinessesId: this.DelegationId,
          Year: this.Api_GET_TradeOrderCompetitionListQO.Year
        };
      } else {
        data = this.Api_GET_TradeOrderCompetitionListQO;
      }
      api_GET_TradeOrderCompetitionList(data).then(res => {
        this.gameData = res;
        if (index === 'created') {
          this.startGameData = res;
        }
        this.loading = false;
      }).catch(error => {
        this.loading = false;
        this.$message({ type: 'error', message: error.error.message });
      });
    },
    // 日期选择器
    timeChange(val) {
      if (val instanceof Array) {
        this.Api_GET_TradeOrderCompetitionListQO.StartDateTime = this.time[0];
        this.Api_GET_TradeOrderCompetitionListQO.EndDateTime = this.time[1];
      } else {
        this.Api_GET_TradeOrderCompetitionListQO.StartDateTime = '';
        this.Api_GET_TradeOrderCompetitionListQO.EndDateTime = '';
      }
      this.getGameData();
    },
    close() {
      this.dialogVisible = false;
      this.time = [];
      this.Api_GET_TradeOrderCompetitionListQO.Year = this.year[0];
      this.gameData = this.startGameData;
    },
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 导出
    exportData() {
      var that = this;
      this.buLoading = true;
      const tempUrl = `/api/excel`;
      const fileName = this.radioGame.name + '赛事订单' + '.xlsx';
      const params = {};
      params.ReportName = 'ExportOrdersExcel';
      params.competitionIds = this.radioGame.competitionId;
      params.searchBusinessOrder = JSON.stringify(this.form);
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, params).then(res => {
        that.buLoading = false;
      }).catch(error => {
        that.buLoading = false;
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
      this.dialogVisible = false;
      this.time = [];
      this.Api_GET_TradeOrderCompetitionListQO.Year = this.year[0];
      this.gameData = this.startGameData;
    }
  }
};
</script>

<style scoped>
.radio /deep/ .el-radio__label{
  width: 170px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
}
</style>
